<template>
  <div class="register">
    <div class="regbox">
      <div class="reg-title">
        <h2>撤回变更商标申请人/注册人名义/地址/变更集体商标/证明商标管理规则/集体成员名单申请</h2>
      </div>
      <div class="reg-form">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="200px"
          class="demo-ruleForm"
        >
          <el-form-item label="申请人名义（中文）：" prop="name">
            <el-input v-model="ruleForm.name" :disabled='true'></el-input>
          </el-form-item>
          <el-form-item label="商标申请号/注册号：" prop="number">
            <el-input v-model="ruleForm.number" placeholder="商标申请号/注册号"></el-input>
          </el-form-item>
          <el-form-item label="原变更申请号：" prop="change">
            <el-input v-model="ruleForm.change" placeholder="原变更申请号:"></el-input>
          </el-form-item>
          <el-form-item label="是否共有商标：" prop="share">
            <el-radio-group v-model="ruleForm.share">
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="撤回变更管理规则：" prop="recallRule">
            <el-checkbox-group v-model="ruleForm.recallRule">
              <el-checkbox label="1">是</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="撤回变更集体成员名单：" prop="recallList">
            <el-checkbox-group v-model="ruleForm.recallList">
              <el-checkbox label="1" >是</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="撤回理由：" prop="desc">
            <el-input type="textarea" :autosize="{ minRows: 5}" v-model="ruleForm.desc"></el-input>
          </el-form-item>
          <base-upload @getFile="getFile"></base-upload>
        </el-form>
      </div>
      <div class="r-f-sutbox">
        <el-button class="r-f-sut" :loading="loading" @click="subForm('ruleForm')">{{show}}</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import BaseUpload from '@/components/base-component/BaseUpload'

export default {
  name: "register",
  data() {
    return {
      loading:false,
      show:'提交',
      ruleForm: {
        name: "1",
        number: "1",
        change: "1",
        share: "1",
        recallRule: "",
        recallList: "",
        desc: "1",
      },
      rules: {
        name: [{ required: true, message: "字段不能为空", trigger: "blur" }],
        number: [{ required: true, message: "字段不能为空", trigger: "blur" }],
        change:[{required: true, message: "字段不能为空", trigger: "change"}],
        share: [{ required: true, message: "字段不能为空", trigger: "blur" }],
        recallRule: [{ required: false, message: "字段不能为空", trigger: "blur" } ],
        recallList: [{ required: false, message: "字段不能为空", trigger: "blur" }],
        desc: [{ required: true, message: "字段不能为空", trigger: "blur" }],
      },

      // 说明文件图片
      explainimg: [],
      // 图片上传
      confirmationimg: [],
      //业务id
      classId:15,
      formData: new FormData()
    };
  },
  methods: {
    open(msg,lei='success') {
      this.$notify({
        title: 'Info',
        message: msg,
        showClose: false,
        duration:2000,
        type:lei
      });
    },
    subForm(formName) {
      this.show = ''
      this.loading = true
     if( this.confirmationimg == 0 ){
       this.open('确认书未上传','warning')
        this.loading=false
        this.show='提交'
       return
     };
      console.log(this.confirmationimg);
      console.log(this.explainimg);
      
for (var i = 0; i < this.confirmationimg.length; i++) {
            this.formData.append("docImgs",this.confirmationimg[i]);
        }
for (var i = 0; i < this.explainimg.length; i++) {
            this.formData.append("confirmImgs",this.explainimg[i]);
        }
        this.formData.append("applicant", this.ruleForm.name);
        this.formData.append("before_change_num", this.ruleForm.change);
        this.formData.append("is_share", this.ruleForm.share);
        this.formData.append("confirmImgs", this.explainimg);
        this.formData.append("docImgs", this.confirmationimg);
        this.formData.append("reasons_withdrawal",this.ruleForm.desc);
        this.formData.append("regist_num", this.ruleForm.number);
        this.formData.append("withdrawal_change_rule", Number(this.ruleForm.recallRule));
        this.formData.append("withdrawal_change_person",Number(this.ruleForm.recallList) );
        this.formData.append('classId',this.classId)

        var config = {
        header: {
          "Content-Type": "multipart/form-data"
        }
      };
        this.$refs[formName].validate((valid) => {
            if(valid) {
                this.$http.post(
                  'http://192.168.0.102:8080/proTWithdraw/update',
                  this.formData,
                  config
                ).then((result)=>{
                  console.log(result);
                  if(result.data.code === 200){
                    this.$router.push({
                      path:'/administer'
                    })
                    this.open(result.data.message)
                  }else{
                    this.open(result.data.message)
                    this.loading = false
                    this.show = '提交'
                  }
                })
            } else {
                console.log('error submit!!');
                return false;
            }
        });
    },
    // 获取数据
    getFile(data, data2) {
      this.explainimg = data
      this.confirmationimg=data2
    },
    
  },
  
  components:{
    'base-upload':BaseUpload
  },
};
</script>

<style scoped lang="less">
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active, 2.1.8 版本以下 */ {
  opacity: 0;
}
i,
em {
  font-style: normal;
}
.register {
  width: 100%;
  background-color: #e7e8eb;
  .regbox {
    width: 1240px;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
    .reg-title {
      padding: 15px 20px;
      text-align: center;
      border-bottom: 1px solid #e7e8eb;
      h2 {
        font-size: 22px;
        font-weight: 300;
      }
    }
    .reg-form {
      width: 700px;
      margin-left: 120px;
      .el-form-item {
        margin-top: 50px;
      }
    }
    .r-f-sutbox {
      margin-top: 50px;
      text-align: center;
      .r-f-sut {
        padding: 12px 20px;
        color: #fff;
        border: none;
        outline: none;
        border-radius: 5px;
        cursor: pointer;
        background-color: #67c23a;
      }
    }
  }
}
</style>
